<template>
  <div ref="mouseTip" class="mouseTipClass" :style="mouseTipStyle">
    <slot></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mouseTipStyle: {}
    }
  },
  mounted() {
    // 监听鼠标在浏览器可见区域中移动
    window.addEventListener('mousemove', this.mousemove)
    // 监听鼠标移出浏览器可见区域
    window.addEventListener('mouseout', this.mouseout)
  },
  methods: {
    mouseout() {
      this.mouseTipStyle = {'display':'none'}
    },
    mousemove(e) {
      this.mouseTipStyle = {'display':'block','margin-top':e.clientY + 20 + 'px'}
    },
  }
}
</script>
<style scoped>
.mouseTipClass {
  display: none;
  position: fixed;
  z-index: 9999;
  background: white;
  border: 1px solid gray;
  padding: 4px;
  border-radius: 4px;
}
</style>
